<template>
  <div>
    这是一个空白页, 以下为测试内容:

    <pre>
      @import '~@/styles/variables.less';

.container-page {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  // width: 300px;
  // height: 300px;
  // top: 50%;
  // left: 50%;
  // transform: translate(-50%, -50%);

  .loop-page-split(@i, @n) when (@i =@n) {

    .page-split-@{i}-enter-active {
      transition: all @i * .4s .2s;
      transform: rotateZ(90deg);
    }

    .page-split-@{i}-enter-to {
      transform: rotateZ(0deg);
    }

    .page-split-@{i}-leave-to {
      transition: all (.4 * (@n+2))- (@i * .4s);
      transform: rotateZ(-90deg);
    }

    .loop-page-split(@i+1, @n)
  }

  .loop-page-split(1, 3);

  .btn-close {
    width: 60px;
    height: 60px;
    display: block;
    margin: 20px;
    transform: skew(-10deg);
    border-radius: 10px;
    background-color: lighten(@navButtonHover, 10%);
    color: #fff;
    text-align: center;
    line-height: 60px;
    font-size: 40px;
    font-weight: bold;
    box-shadow: -2px 2px 5px #000;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 99;

    &::after {
      content: '';
      display: block;
      width: 70%;
      height: 70%;
      border: 3px dashed #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 10px;
    }
  }

  .btn-close-enter-active {
    transition: all .4s 1.5s;
    transform: skew(-10deg) translate(100px, -100px);
  }

  .btn-close-leave-to {
    transition: all .4s;
    transform: skew(-10deg) translate(100px, -100px);
  }


  .btn-close-enter-to,
  .btn-close-leave {
    transform: skew(-10deg) translate(0px, 0px);
  }
}

.g-page-split {
  width: 100vw;
  height: 100vh;
  // width: 100%;
  // height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  transform-origin: top right;
  z-index: -1;
}

.loop-page(@i, @n) when (@i @n) {
  @color: "pageSplit_@{i}";

  .g-page-split:nth-child(@{i}) {
    background-color: @@color;
  }

  .loop-page(@i+1, @n)
}

.loop-page(1, 3);


.g-page-slot {
  .base_background();
  padding: 40px;
  box-sizing: border-box;
  max-width: 100vw;
  max-height: 100vh;
  position: relative;
  overflow: hidden;
  z-index: 99;

  .page-slot {
    width: 100%;
    height: 100%;
    background: @pageSlot;
    box-shadow: 0 0 8px #000 inset;
    border-radius: 20px;
    position: relative;
    z-index: 1;
    padding: 8px;
    box-sizing: border-box;

    opacity: 0;
    animation: page-slot-show .4s 1s forwards;

    .g-padding {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  }
}

@keyframes page-slot-show {
  100% {
    opacity: 1;
  }
}
    </pre>

  </div>
</template>

<script>
export default {};
</script>
